import React, { Component } from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  TouchableHighlight,
  Image,
} from 'react-native';


import CommonViewPagerOne from '../common/CommonViewPagerOne';
import TImage from '../../components/TImage';
import SizeUtils from '../../common/SizeUtils';
import ImageConstants from '../../common/ImageConstants';
import {DateUtils} from '../../utils/Utils';
import CommonStyles from '../../common/CommonStyles';
import Constants from '../../common/Constants';
import Config from '../../config';
import BaseItem from '../common/BaseItem';
import ToastUtils from '../../common/ToastUtils';
import CommonAvatarView from '../common/CommonAvatarView';
import QZ_FollowUser from '../../actions/quanzi/QZ_FollowUser';

class QZ_FollowListItemView extends Component {
  constructor(props) {
    super(props);
    this.state={
      is_follow:this.props.data.is_follow
    }
  }
  followAction(by_user_id){
     new QZ_FollowUser().call(this, {user_id:by_user_id,status:!this.state.is_follow});
  }	
  	_getImageSource(data) {
    	if(data.avatar_url) {
      	return {uri:data.avatar_url};
    	}else {
      	return {uri:""};
    	}
  	}
  //标签
  	_renderContentItemTagPer(by_user_id,title,isjoin,isFan) {
      return (
      <TouchableOpacity style={{marginLeft:SizeUtils.translateDesignWidthToCode(20),
        backgroundColor:'#fff', borderRadius:SizeUtils.translateDesignNumToCode(10),
        height:SizeUtils.translateDesignHeightToCode(40),
        borderColor:isjoin?'#ee3535':(isFan?'#ee3535':'#a3a3a3'), borderWidth:1, marginRight:SizeUtils.translateDesignWidthToCode(10),
        flexDirection:"row", justifyContent:"center", alignItems:"center"}} onPress={()=>{this.followAction(by_user_id)}}>
        <Text style={{color:isjoin?'#ee3535':(isFan?'#ee3535':'#a3a3a3'), fontSize:SizeUtils.translateFontSizeToCode(24),
         textAlign:"center",
          marginLeft:SizeUtils.translateDesignWidthToCode(15), marginRight:SizeUtils.translateDesignWidthToCode(15)}}>
         {title}
       </Text>
      </TouchableOpacity>
     )
   }
  render() {
    	const {isFan,data} = this.props;
    	const title =this.state.is_follow?'已关注':"关注";
    	return (<View style={{
    		height:SizeUtils.translateDesignHeightToCode(100),
    		flexDirection:"row",
  			paddingLeft:SizeUtils.translateDesignWidthToCode(40),
  			paddingRight:SizeUtils.translateDesignWidthToCode(40),
  			alignItems: 'center',
    		borderColor:'#eeeeee',
            borderBottomWidth:SizeUtils.translateDesignHeightToCode(3),
    	}}>
    		<CommonAvatarView avatarUri={this._getImageSource(data.user)} size={80}/>
    		<Text style={{marginLeft:SizeUtils.translateDesignWidthToCode(20),
    				flex:1,
            		fontSize:SizeUtils.translateFontSizeToCode(30),
            		backgroundColor:'#fff0',
            		color:'#000',
          		}}> {data.user.nick||'会玩的猫'} </Text>
          	{this._renderContentItemTagPer(data.user.user_id,title,this.state.is_follow,isFan)}
    	</View>
    );
  }
}

export default QZ_FollowListItemView;